<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/HarshHS/pen/KzqNjO?depth=everything&order=popularity&page=80&q=product&show_forks=false" />
<style class="cp-pen-styles">body {
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #414146;
background: #f0f0f0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #000;
outline: none;
}
a:hover,
a:focus {
color: #414146;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
}
/* Header */
.codrops-header {
position: relative;
z-index: 100;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
padding: 1em;
}
.codrops-header h1 {
font-size: 1em;
line-height: 1;
margin: 0;
padding: 0 1em;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: inline-block;
text-align: center;
white-space: nowrap;
border: 2px solid #414146;
}
.codrops-links::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 110%;
margin-left: -1px;
background: #414146;
-webkit-transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg);
transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg);
}
.codrops-icon {
display: inline-block;
width: 1.5em;
margin: 0.5em;
padding: 0em 0;
text-decoration: none;
}
.codrops-icon span {
display: none;
}
.codrops-icon:before {
font-family: 'codropsicons';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
margin: 0 5px;
text-transform: none;
-webkit-font-smoothing: antialiased;
speak: none;
}
.codrops-icon--drop:before {
content: '\e001';
}
.codrops-icon--prev:before {
content: '\e004';
}
/* Content */
.content {
padding: 3em 0;
}
/* Related demos */
.content--related {
font-weight: bold;
padding: 3em 1em 10em;
text-align: center;
}
.media-item {
display: inline-block;
padding: 2em;
vertical-align: top;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.media-item__img {
max-width: 100%;
opacity: 0.6;
border-radius: 50%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
font-size: 1em;
margin: 0;
padding: 0.5em;
}
body #cdawrap {
top: 15px;
border: none;
background: #DDD;
}
@media screen and (max-width: 40em) {
.codrops-header {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.codrops-header h1 {
width: 100%;
padding: 1em 0;
}
}
.deco {
pointer-events: none;
}
.deco--title {
position: absolute;
top: 0px;
right: 60px;
left: 60px;
height: 100vh;
background: url(../img/deco.svg) no-repeat center top;
background-size: 100%;
}
.slideshow {
position: relative;
width: 100vw;
margin: 10vh 0 5em;
}
.slide {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-align-items: center;
align-items: center;
width: 100vw;
text-align: center;
}
.js .slide {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
.slide.slide--current {
position: relative;
visibility: visible;
}
.deco--circle {
position: absolute;
top: 0;
border-radius: 50%;
background: #fff;
}
.deco--circle-left {
right: calc(100% - 140px);
}
.deco--circle-right {
left: calc(100% - 140px);
}
.deco--circle,
.slide__inner {
width: 450px;
height: 450px;
}
.slide__item {
position: relative;
width: 100%;
}
.no-js .slide__item {
display: none;
}
.slide__inner {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
margin: 0 auto;
padding: 20px;
pointer-events: auto;
}
.deco--expander {
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
border-radius: 50%;
background: #fff;
}
.slide__title {
position: relative;
text-indent: 4px;
letter-spacing: 4px;
text-transform: uppercase;
color: #b2b2b4;
}
.slide__title--preview {
font-size: 1.05em;
margin: 2em 0 0 0;
padding: 0;
opacity: 0;
text-align: center;
}
.slide__title--main {
font-size: 2.5em;
line-height: 1;
margin: 0 0 0.25em;
color: #464653;
}
.slide--current .slide__title--preview {
opacity: 1;
}
.slide--open .slide__title--main {
opacity: 1;
}
.slide__price {
font-weight: bold;
display: inline-block;
color: #464653;
}
.slide__price--large {
font-size: 1.3em;
vertical-align: middle;
}
.slide__img {
position: relative;
display: block;
margin: 0 auto;
}
.slide__img--small {
max-height: 80%;
}
.slide__img--large {
height: 50vh;
max-height: 400px;
margin: 0 auto 3em;
}
.action {
font-size: 1.5em;
line-height: 54px;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
text-align: center;
border: none;
background: none;
}
.action:focus {
outline: none;
}
.action--open {
position: absolute;
right: 0;
bottom: 0;
margin: 0 40px 40px 0;
color: #fff;
border-radius: 50%;
background: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, background 0.1s, opacity 0.1s;
transition: transform 0.1s, background 0.1s, opacity 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.action--open:focus,
.action--open:hover {
background: #464653;
-webkit-transform: scale3d(1.0865, 1.0865, 1);
transform: scale3d(1.0865, 1.0865, 1);
}
.slide--open .action--open {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(0.3, 0.3, 1);
transform: scale3d(0.3, 0.3, 1);
}
.action--close {
position: fixed;
z-index: 1001;
top: 10px;
right: 15px;
color: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, opacity 0.1s, color 0.1s;
transition: transform 0.1s, opacity 0.1s, color 0.1s;
}
.action--close:focus,
.action--close:hover {
color: #464653;
}
.slide--open ~ .action--close {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-delay: 0.5s, 0.5s, 0s;
transition-delay: 0.5s, 0.5s, 0s;
}
.action--close,
.slide--close ~ .action--close {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 1);
transform: scale3d(0.3, 0.3, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.js .slide__content {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: 0;
}
.js .slide--open .slide__content {
pointer-events: auto;
opacity: 1;
}
.slide__content-scroller {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
padding: 2em;
position: relative;
}
.js .slide__content-scroller {
position: fixed;
min-height: 100vh;
width: 100vw;
}
.slide__description {
font-size: 1em;
font-weight: bold;
margin: 0.25em auto 3em;
text-indent: 4px;
letter-spacing: 4px;
text-transform: uppercase;
color: #acacb3;
}
.button {
font-weight: bold;
margin: 0 1em;
padding: 0.5em 1em;
color: #fff;
border: none;
border-radius: 2px;
background: #6cd84e;
}
.button:focus,
.button:hover {
outline: none;
background: #464653;
}
.navbutton {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 100px;
height: 30px;
margin: 0;
margin: -50px 0 0 0;
padding: 0;
border: none;
background: none;
}
.navbutton__line {
-webkit-transition: stroke 0.2s;
transition: stroke 0.2s;
}
.navbutton:focus {
outline: none;
}
.navbutton:hover .navbutton__line {
stroke: #464653;
}
.navbutton--next {
-webkit-transform: translate3d(220px,-125px,0);
transform: translate3d(220px,-125px,0);
}
.navbutton--prev {
-webkit-transform: translate3d(-100%, 0, 0) translate3d(-220px,137px,0);
transform: translate3d(-100%, 0, 0) translate3d(-220px,137px,0);
} /* +12 of difference */
/* Helper classes */
.lockscroll {
position: fixed;
overflow-y: scroll;
height: 100vh;
}
.noscroll {
overflow: hidden;
height: 100vh;
position: fixed;
}
.noscroll .deco--expander {
display: none;
}
.scrollable {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: #fff;
}
.scrollable .slide__content-scroller {
position: relative;
}
@media screen and (max-width: 50em) {
.deco--title {
right: -50px;
left: -50px;
}
.deco--circle,
.slide__inner {
width: 260px;
height: 260px;
}
.deco--expander {
margin: -130px 0 0 -130px;
}
.deco--circle-left {
right: calc(100% - 50px);
}
.deco--circle-right {
left: calc(100% - 50px);
}
.slideshow {
margin-top: 0;
}
.action--open {
margin: 0 12px 12px 0;
}
.slide__content-scroller {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.slide__img--large {
margin: 0 auto 2em;
}
.slide__title--preview,
.slide__title--main {
font-size: 0.85em;
}
.slide__description {
font-size: 0.5em;
}
.navbutton--next {
-webkit-transform: translate3d(75px,-90px,0) scale3d(0.5,0.5,1);
transform: translate3d(75px,-90px,0) scale3d(0.5,0.5,1);
}
.navbutton--prev {
-webkit-transform: translate3d(-100%, 0, 0) translate3d(-75px,115px,0) scale3d(0.5,0.5,1);
transform: translate3d(-100%, 0, 0) translate3d(-75px,115px,0) scale3d(0.5,0.5,1);
}
}</style></head><body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://tympanus.net/Development/ElasticCircleSlideshow/js/dynamics.min.js"></script>
<div class="container">
<header class="codrops-header">
<h1>Elastic Circle Slideshow by Harsh Sharma</h1>
</header>
<div class="deco deco--title"></div>
<div id="slideshow" class="slideshow">
<div class="slide">
<h2 class="slide__title slide__title--preview">Macadamia Skin Oil <span class="slide__price">$39</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/1.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/1.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Macadamia Skin Oil</h2>
<p class="slide__description">Hydration for very dry skin</p>
<div>
<span class="slide__price slide__price--large">$39</span>
<button class="button button--buy">Add to cart</button>
</div>
</div><!-- /slide__details -->
</div><!-- slide__content-scroller -->
</div><!-- slide__content -->
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Grapeseed Skin Oil <span class="slide__price">$19</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/2.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="img/2.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Grapeseed Skin Oil</h2>
<p class="slide__description">Moisture control for all skin types</p>
<div>
<span class="slide__price slide__price--large">$19</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Jojoba Skin Oil <span class="slide__price">$35</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/3.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/3.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Jojoba Skin Oil</h2>
<p class="slide__description">Protection for sensitive skin</p>
<div>
<span class="slide__price slide__price--large">$35</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Amaranth Skin Oil <span class="slide__price">$29</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/4.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/4.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Amaranth Skin Oil</h2>
<p class="slide__description">Rich hydration for mature skin</p>
<div>
<span class="slide__price slide__price--large">$29</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Argan Skin Oil <span class="slide__price">$59</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/5.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/5.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Argan Skin Oil</h2>
<p class="slide__description">Moisture for problematic & dry skin</p>
<div>
<span class="slide__price slide__price--large">$59</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<h2 class="slide__title slide__title--preview">Avocado Skin Oil <span class="slide__price">$39</span></h2>
<div class="slide__item">
<div class="slide__inner">
<img class="slide__img slide__img--small" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/small/6.png" alt="Some image" />
<button class="action action--open" aria-label="View details"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="slide__content">
<div class="slide__content-scroller">
<img class="slide__img slide__img--large" src="https://tympanus.net/Development/ElasticCircleSlideshow/img/6.png" alt="Some image" />
<div class="slide__details">
<h2 class="slide__title slide__title--main">Avocado Skin Oil</h2>
<p class="slide__description">Deep repair for stressed skin</p>
<div>
<span class="slide__price slide__price--large">$39</span>
<button class="button button--buy">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<button class="action action--close" aria-label="Close"><i class="fa fa-close"></i></button>
</div>
<!-- Related demos -->
<section class="content content--related">
<p>© by <a target="_blank" href="https://codepen.io/HarshHS/">Harsh Sharma</a> <a target="_blank" href="https://codepen.io/HarshHS/">( codepen.io/HarshHS/ )</a></p>
<a target="_blank" href="https://codepen.io/HarshHS/">View More</a>
</a>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = classie;
} else {
// browser global
window.classie = classie;
}
})( window );
;(function(window) {
'use strict';
var bodyEl = document.body,
docElem = window.document.documentElement,
// http://stackoverflow.com/a/1147768
docWidth = Math.max(bodyEl.scrollWidth, bodyEl.offsetWidth, docElem.clientWidth, docElem.scrollWidth, docElem.offsetWidth),
docHeight = Math.max(bodyEl.scrollHeight, bodyEl.offsetHeight, docElem.clientHeight, docElem.scrollHeight, docElem.offsetHeight);
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
function extend( a, b ) {
for( var key in b ) {if (window.CP.shouldStopExecution(1)){break;}
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
window.CP.exitedLoop(1);
return a;
}
/**
* Circle Slideshow
*/
function CircleSlideshow(el, options) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
// items
this.items = [].slice.call(this.el.querySelectorAll('.slide'));
// total items
this.itemsTotal = this.items.length;
if( this.itemsTotal < 2 ) return;
// content close control
this.closeCtrl = this.el.querySelector('.action--close');
// index of current slide
this.current = 0;
// all items are closed initially
this.isClosed = true;
this._init();
}
CircleSlideshow.prototype.options = {};
CircleSlideshow.prototype._init = function() {
// add navigation ctrls and left & right circles to the DOM
this.navLeftCtrl = document.createElement('button');
this.navLeftCtrl.className = 'navbutton navbutton--next';
this.navLeftCtrl.setAttribute('aria-label', 'Next item');
this.navLeftCtrl.innerHTML = '<svg width="100px" height="30px" viewBox="0 0 100 30"><polyline class="navbutton__line" fill="none" stroke="#6CD84E" stroke-width="5" points="69.821,3.795 92.232,26.205 0,26.205"/></svg>';
this.navRightCtrl = document.createElement('button');
this.navRightCtrl.className = 'navbutton navbutton--prev';
this.navRightCtrl.setAttribute('aria-label', 'Previous item');
this.navRightCtrl.innerHTML = '<svg width="100px" height="30px" viewBox="0 0 100 30"><polyline class="navbutton__line" fill="none" stroke="#6CD84E" stroke-width="5" points="30.179,26.205 7.768,3.795 100,3.795"/></svg>';
this.el.insertBefore(this.navLeftCtrl, this.el.firstChild);
this.el.insertBefore(this.navRightCtrl, this.el.firstChild);
var leftCircle = document.createElement('div'), rightCircle = document.createElement('div');
leftCircle.className = 'deco deco--circle deco--circle-left';
rightCircle.className = 'deco deco--circle deco--circle-right';
this.el.insertBefore(leftCircle, this.el.firstChild);
this.el.insertBefore(rightCircle, this.el.firstChild);
this.circles = {left: leftCircle, right: rightCircle};
dynamics.css(this.circles.left, {scale: 0.8});
dynamics.css(this.circles.right, {scale: 0.8});
// add the expander element per slide (.deco--expander)
this.items.forEach(function(item) {
var expanderEl = document.createElement('div');
expanderEl.className = 'deco deco--circle deco--expander';
var slideEl = item.querySelector('.slide__item');
slideEl.insertBefore(expanderEl, slideEl.firstChild);
});
// position current item:
classie.add(this.items[this.current], 'slide--current');
// event binding
this._initEvents();
};
CircleSlideshow.prototype._initEvents = function() {
var self = this;
// slideshow navigation
this.navRightCtrl.addEventListener('click', function() { self._navigate('left'); });
this.navLeftCtrl.addEventListener('click', function() { self._navigate('right'); });
// opening items
this.items.forEach(function(item) {
item.querySelector('.action--open').addEventListener('click', function(ev) {
self._openContent(item);
ev.target.blur();
});
});
// closing items
this.closeCtrl.addEventListener('click', function() { self._closeContent(); });
// keyboard navigation events
document.addEventListener('keydown', function(ev) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37:
self._navigate('left');
break;
case 39:
self._navigate('right');
break;
case 13: // enter
if( self.isExpanded ) return;
self._openContent(self.items[self.current]);
break;
case 27: // esc
if( self.isClosed ) return;
self._closeContent();
break;
}
});
// swipe navigation
// from http://stackoverflow.com/a/23230280
this.el.addEventListener('touchstart', handleTouchStart, false);
this.el.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
if( !self.isExpanded ) {
self._navigate('right');
}
} else {
/* right swipe */
if( !self.isExpanded ) {
self._navigate('left');
}
}
}
/* reset values */
xDown = null;
yDown = null;
};
};
CircleSlideshow.prototype._navigate = function(dir) {
if( this.isExpanded ) {
return false;
}
this._moveCircles(dir);
var self = this,
itemCurrent = this.items[this.current],
currentEl = itemCurrent.querySelector('.slide__item'),
currentTitleEl = itemCurrent.querySelector('.slide__title');
// update new current value
if( dir === 'right' ) {
this.current = this.current < this.itemsTotal-1 ? this.current + 1 : 0;
}
else {
this.current = this.current > 0 ? this.current - 1 : this.itemsTotal-1;
}
var itemNext = this.items[this.current],
nextEl = itemNext.querySelector('.slide__item'),
nextTitleEl = itemNext.querySelector('.slide__title');
// animate the current element out
dynamics.animate(currentEl,
{
translateX: dir === 'right' ? -1*currentEl.offsetWidth : currentEl.offsetWidth, scale: 0.7
},
{
type: dynamics.spring, duration: 2000, friction: 600,
complete: function() {
dynamics.css(itemCurrent, { visibility: 'hidden' });
}
}
);
// animate the current title out
dynamics.animate(currentTitleEl,
{
translateX: dir === 'right' ? -250 : 250, opacity: 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 450
}
);
// set the right properties for the next element to come in
dynamics.css(itemNext, {visibility: 'visible'});
dynamics.css(nextEl, {translateX: dir === 'right' ? nextEl.offsetWidth : -1*nextEl.offsetWidth, scale: 0.7});
// animate the next element in
dynamics.animate(nextEl,
{
translateX: 0
},
{
type: dynamics.spring, duration: 3000, friction: 700, frequency: 500,
complete: function() {
self.items.forEach(function(item) { classie.remove(item, 'slide--current'); });
classie.add(itemNext, 'slide--current');
}
}
);
// set the right properties for the next title to come in
dynamics.css(nextTitleEl, { translateX: dir === 'right' ? 250 : -250, opacity: 0 });
// animate the next title in
dynamics.animate(nextTitleEl,
{
translateX: 0, opacity: 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000
}
);
};
CircleSlideshow.prototype._moveCircles = function(dir) {
var animProps = {
type: dynamics.easeIn,
duration: 100,
complete: function(el) {
dynamics.animate(el,
{
translateX: 0, scale: 0.8
},
{
type: dynamics.spring, duration: 1000, friction: 300
}
);
}
};
dynamics.animate(this.circles.right,
{
translateX: dir === 'right' ? -this.circles.right.offsetWidth/3 : this.circles.right.offsetWidth/3, scale: 0.9
},
animProps
);
dynamics.animate(this.circles.left,
{
translateX: dir === 'right' ? -this.circles.left.offsetWidth/3 : this.circles.left.offsetWidth/3, scale: 0.9
},
animProps
);
};
CircleSlideshow.prototype._openContent = function(item) {
this.isExpanded = true;
this.isClosed = false;
this.expandedItem = item;
var self = this,
expanderEl = item.querySelector('.deco--expander'),
scaleVal = Math.ceil(Math.sqrt(Math.pow(docWidth, 2) + Math.pow(docHeight, 2)) / expanderEl.offsetWidth),
smallImgEl = item.querySelector('.slide__img--small'),
contentEl = item.querySelector('.slide__content'),
largeImgEl = contentEl.querySelector('.slide__img--large'),
titleEl = contentEl.querySelector('.slide__title--main'),
descriptionEl = contentEl.querySelector('.slide__description'),
priceEl = contentEl.querySelector('.slide__price'),
buyEl = contentEl.querySelector('.button--buy');
// add slide--open class to the item
classie.add(item, 'slide--open');
// prevent scrolling
bodyEl.style.top = -scrollY() + 'px';
classie.add(bodyEl, 'lockscroll');
// position the content elements:
// - image (large image)
dynamics.css(largeImgEl, {translateY : 800, opacity: 0});
// - title
dynamics.css(titleEl, {translateY : 600, opacity: 0});
// - description
dynamics.css(descriptionEl, {translateY : 400, opacity: 0});
// - price
dynamics.css(priceEl, {translateY : 400, opacity: 0});
// - buy button
dynamics.css(buyEl, {translateY : 400, opacity: 0});
// animate (scale up) the expander element
dynamics.animate(expanderEl,
{
scaleX : scaleVal, scaleY : scaleVal
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.5,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.5,"y":1}]}], duration: 1700
}
);
// animate the small image out
dynamics.animate(smallImgEl,
{
translateY : -600, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 300, delay: 75
}
);
// animate the large image in
dynamics.animate(largeImgEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 300
}
);
// animate the title element in
dynamics.animate(titleEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 400
}
);
// animate the description element in
dynamics.animate(descriptionEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 500
}
);
// animate the price element in
dynamics.animate(priceEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 600
}
);
// animate the buy element in
dynamics.animate(buyEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 700,
complete: function() {
// add .noscroll to body and .scrollable to .slide__content
classie.add(bodyEl, 'noscroll');
classie.add(contentEl, 'scrollable');
// force redraw (chrome)
contentEl.style.display = 'none';
contentEl.offsetHeight;
contentEl.style.display = 'block';
// allow scrolling
classie.remove(bodyEl, 'lockscroll');
}
}
);
};
CircleSlideshow.prototype._closeContent = function() {
this.isClosed = true;
var self = this,
item = this.expandedItem,
expanderEl = item.querySelector('.deco--expander'),
smallImgEl = item.querySelector('.slide__img--small'),
contentEl = item.querySelector('.slide__content'),
largeImgEl = contentEl.querySelector('.slide__img--large'),
titleEl = contentEl.querySelector('.slide__title--main'),
descriptionEl = contentEl.querySelector('.slide__description'),
priceEl = contentEl.querySelector('.slide__price'),
buyEl = contentEl.querySelector('.button--buy');
// add slide--close class to the item
classie.add(item, 'slide--close');
// remove .noscroll from body and .scrollable from .slide__content
classie.remove(bodyEl, 'noscroll');
classie.remove(contentEl, 'scrollable');
// animate the buy element out
dynamics.stop(buyEl);
dynamics.animate(buyEl,
{
translateY : 400, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000
}
);
// animate the price element out
dynamics.stop(priceEl);
dynamics.animate(priceEl,
{
translateY : 400, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000
}
);
// animate the description element out
dynamics.stop(descriptionEl);
dynamics.animate(descriptionEl,
{
translateY : 400, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 100
}
);
// animate the title element out
dynamics.stop(titleEl);
dynamics.animate(titleEl,
{
translateY : 600, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 1000, delay: 200
}
);
// animate the large image out
dynamics.animate(largeImgEl,
{
translateY : 800, opacity : 0
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 500, delay: 300,
complete: function() {
// remove slide--open class to the item
classie.remove(item, 'slide--open');
// remove slide--close class to the item
classie.remove(item, 'slide--close');
// allow scrolling
classie.remove(bodyEl, 'lockscroll');
self.isExpanded = false;
}
}
);
// animate the small image in
dynamics.animate(smallImgEl,
{
translateY : 0, opacity : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], duration: 700, delay: 500
}
);
// animate (scale down) the expander element
dynamics.animate(expanderEl,
{
scaleX : 1, scaleY : 1
},
{
type: dynamics.bezier, points: [{"x":0,"y":0,"cp":[{"x":0.5,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.5,"y":1}]}], duration: 700, delay: 250
}
);
};
window.CircleSlideshow = CircleSlideshow;
})(window);
(function() {
document.documentElement.className = 'js';
var slideshow = new CircleSlideshow(document.getElementById('slideshow'));
})();
//# sourceURL=pen.js
</script>
</body></html>
